<template>
    <div class="container">
        <div class="mouse-area" @mousemove="handleMouseMove"></div>
        <div class="path-display">
            <canvas ref="canvas" class="canvas"></canvas>
        </div>
    </div>
</template>
  
<script>
import { ref, onMounted } from 'vue';

export default {
    setup() {
        const canvas = ref(null);
        const context = ref(null);
        const lastX = ref(null);
        const lastY = ref(null);

        onMounted(() => {
            if (canvas.value) {
                context.value = canvas.value.getContext('2d');
                context.value.lineWidth = .1;
                context.value.strokeStyle = 'blue';
            }
        });

        const handleMouseMove = (event) => {
            if (canvas.value) {
                const x = event.offsetX;
                const y = event.offsetY;
                drawPath(x, y);
            }
        };

        const drawPath = (x, y) => {
            if (!lastX.value || !lastY.value) {
                context.value.moveTo(x, y);
            } else {
                context.value.moveTo(lastX.value, lastY.value);
                context.value.lineTo(x, y);
            }
            context.value.stroke();
            lastX.value = x;
            lastY.value = y;
        };

        return {
            canvas,
            context,
            handleMouseMove
        };
    }
};
</script>
  
<style>
.container {
    display: flex;
}

.mouse-area,
.path-display {
    flex: 1;
    margin: 5px;
    border: 1px solid #ccc;
    position: relative;
}

.canvas {
    width: 100%;
    height: 100%;
    display: block;
}
</style>